<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{% block title %}默认标题{% endblock %}</title>
    <link rel="stylesheet" href="/static/css/page.css" />
    <link rel="stylesheet" href="/static/css/head_navigator.css" />
    <link rel="stylesheet" href="/static/css/left_column.css" />
    <link rel="stylesheet" href="/static/css/modal.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <script type="text/javascript" src="/static/js/modal_creator.js"></script>
    <script type="text/javascript" src="/static/js/left_column.js"></script>
    <script type="text/javascript" src="/static/js/head_navigator.js"></script>
    {% block extra_css %}{% endblock %}
    {% block extra_js %}{% endblock %}
    <style>
        body {
            transition: opacity 0.3s ease;
        }
        
        .page {
            opacity: 0;
            animation: fadeIn 0.5s ease forwards;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
  </head>

  <body>
    <div class="page">
      <!-- 顶部导航栏 -->
      <div class="head_navigator">
        <div class="logoContainer">
          <div class="hospital_logo">
            <img class="hospital_logo_Image" src="/static/pictures/hospital.png" />
            <div class="hospital_logoText">
              <span class="hospital_name_Ch">中心医院</span>
              <span class="hospital_name_En">Central Hospital</span>
            </div>
          </div>
          <div class="searchBlank">
            <img class="image_2" src="/static/pictures/search.png" />
            <input type="text" class="borderless-input" placeholder="患者名称 / 药品编号 / 病房号">
          </div>
          <div style="display: flex;align-items: center;gap: 10px;">
            <div >
              {% if current_user.is_authenticated %}
              <a href="{{ url_for('requesting.my_request')}}">
                <img id="request_icon" src="/static/pictures/norequest.png" />
              </a>
              {% endif %}
            </div>
            <div class="doctorInfoContainer" onclick="showDoctorModal()" style=" flex: 1;">
              {% if current_user.is_authenticated %}
                <span class="font doctorName">{{ current_user.doctor_name }} ({{ current_user.doctor_id }})</span>
                <span class="doctorInfo">
                  <span id="doctor-dept">{{ current_user.dept_name }}</span>
                </span>
              {% else %}
                <span class="font doctorName">非登入状态</span>
              {% endif %}
            </div>
          </div>
        </div>
      </div>

      <!-- 医生信息模态框 -->
      {% if current_user.is_authenticated %}
      <div class="modal-overlay" id="doctor-modal" style="display: none;">
        <div class="doctor-modal">
          <div class="doctor-header">
            <div class="doctor-avatar">
              <i class="fas fa-user-md"></i>
            </div>
            <h2>{{ current_user.doctor_name }}</h2>
            <p class="doctor-title">{{ current_user.type }}</p>
            <button class="close-btn" onclick="closeDoctorModal()">
              <i class="fas fa-times"></i>
            </button>
          </div>
          
          <div class="doctor-content">
            <div class="info-section">
              <div class="info-item">
                <i class="fas fa-id-card"></i>
                <div class="info-text">
                  <label>工号</label>
                  <span>{{ current_user.doctor_id }}</span>
                </div>
              </div>
              <div class="info-item">
                <i class="fas fa-hospital-alt"></i>
                <div class="info-text">
                  <label>所属科室</label>
                  <span>{{ current_user.dept_name }}</span>
                </div>
              </div>
              <div class="info-item">
                <i class="fas fa-clinic-medical"></i>
                <div class="info-text">
                  <label>管理病区</label>
                  <span>{{ current_user.ward_id if current_user.ward_id else '暂无管理病区' }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <button onclick="logout()" class="logout-btn">
            <i class="fas fa-sign-out-alt"></i>
            退出登录
          </button>
        </div>
      </div>
      {% endif %}

      <!-- 左侧导航栏 -->
      <div class="container">
        <div class="leftColumn">
          <div class="group_3" style="width: 80%;">
            <div class="section_3">
              <img class="image_2" src="/static/pictures/cwxxGrey.png" />
              <a href="{{ url_for('ward.homepage') }}" class="nav-link">
                <span class="leftOption" id="Option_bed_information">床位信息</span>
              </a>
            </div>
            <div class="section_3">
              <img class="image_2" src="/static/pictures/tjbrGrey.png" />
              <a href="{{ url_for('case.add_case') }}" class="nav-link">
                <span class="leftOption" id="Option_add_patient">添加病人</span>
              </a>
            </div>
            <div class="section_3">
              <img class="image_2" src="/static/pictures/xzcwGrey.png" />
              <a href="{{ url_for('requesting.deal_request')}}" class="nav-link">
                <span class="leftOption" id="Option_deal_request">床位管理</span>
              </a>
            </div>
            <div class="section_3">
              <img class="image_2" src="/static/pictures/clqqGrey.png" />
              <a href="{{ url_for('requesting.my_request')}}" class="nav-link">
                <span class="leftOption" id="Option_my_request">我的请求</span>
              </a>
            </div>
            <div class="section_3">
              <i class="fas fa-sign-in-alt image_2"></i>
              {% if not current_user.is_authenticated %}
                <a href="{{ url_for('auth.login') }}" class="nav-link">
                  <span class="leftOption" id="Option_login">登入系统</span>
                </a>
              {% endif %}
            </div>
          </div>
        </div>

        <!-- 页面主体内容 -->
        {% block content %}{% endblock %}
      </div>
    </div>
  </body>
</html>
